<template>
  <qh-page-view title="商品详情">
    <view class="flex-column-100 details-box">
      <swiper
        v-if="banners.length || goods.video_url"
        class="swiper"
        indicator-dots="true"
        indicator-active-color="var(--primary-color)"
        :autoplay="autoplay"
        :interval="3000"
        :duration="1000"
        circular="true"
      >
        <swiper-item v-if="goods.video_url">
            <!-- objectFit="contain" -->
          <video
            :src="goods.video_url"
            id="myVideo"
            muted
            show-mute-btn
            object-fit="cover"
            @ended="showBanner"
            :autoplay="playVideo"
            loop="false"
            class="myvideo"
          ></video>
        </swiper-item>
        <swiper-item v-for="(item, index) in banners" :key="index">
          <view class="goodsImg">
            <image mode="scaleToFill" @tap="seeBig(index)" :src="item"></image>
          </view>
        </swiper-item>
      </swiper>
      <view class="swiper" v-if="not_banners">
        <view class="goodsImg no-image">
          <text class="no-image-text">暂无图片</text>
        </view>
      </view>

      <!-- 商品介绍 -->
      <view class="bg box-sizing goodinfo-box">
        <view class="details-info">
          <view class="details-name">
            <text>{{ goods.goods_name }}</text>
          </view>
          <view v-if="goods.subheading" class="details-name" style="color: #9e9e9e;">
            <text>{{ goods.subheading }}</text>
          </view>
          <view class="viewc_inner_c">
            <view class="price_title">
              <template v-if="showPlusPrice() && user_type == 2">
                <text class="price">￥{{ goods.plus_price }}</text>
                <text
                  v-if="showIntegral && Number(goods.plus_mem_integral) > 0"
                  class="plus_integral"
                  >+{{ goods.plus_mem_integral }}{{ integral_name }}</text
                >
                <text class="plus-price-icon">PLUS</text>
              </template>
              <template v-else-if="showVipPrice() && user_type != 1">
                <text class="price">￥{{ goods.shop_mem_price }}</text>
                <text
                  v-if="showIntegral && Number(goods.shop_mem_integral) > 0"
                  class="plus_integral"
                  >+{{ goods.shop_mem_integral }}{{ integral_name }}</text
                >
                <text class="vip-price-icon">VIP</text>
              </template>
              <text
                :class="
                  (showPlusPrice() && user_type == 2) ||
                  (showVipPrice() && user_type != 1)
                    ? 'price_pass'
                    : 'price'
                "
                >￥{{ goods.online_price }}</text
              >
              <text
                class="preferential"
                v-if="!showPlusPrice() && goods.vip_online_state == 1"
                >{{ (vip.discount * 100) / 10 }}折</text
              >
            </view>
        
          </view>

          <view class="viewc_inner_c" v-if="goods.rebate > 0">
            <view class="price_title">
              <view class="flex-cn" >
                  <text class="plus-price-color" style="font-size: 36rpx;">￥</text>
                  <text class="plus-price-color"> {{ goods.rebate }}</text>
                  <text class="plus-price-icon">返利</text>
              </view>
            </view>
            </view>
          <text class="Deal"
            >已出售 {{ goods.sell_num ? goods.sell_num : 0 }}</text
          >
          <text v-if="goods.goods_num <= 0" class="sold-out">已售空</text>
        </view>
        <view class="details-share" @tap="showShare">
          <text class="qh-rt-single qh-rt-fenxiang1-copy share-icon"></text>
          <!-- <image src="/static/images/share.png"></image> -->
          <text class="text-share">分享</text>
        </view>
      </view>

      <view
        v-if="goods.keywords_desc && goods.keywords_desc.length > 0"
        style="
          padding-left: 30rpx;
          padding-bottom: 16rpx;
          padding-right: 30rpx;
          background-color: #fff;
        "
      >
        <view
          style="padding-top: 10rpx; border-top: 1px solid #f2f3f5"
          class="bg goodinfo-box"
        >
          <view class="tags-container">
            <block v-for="(val, i) in goods.keywords_desc" :key="i">
              <view
                class="tag_label"
                :style="{ 'padding-left': i === 0 ? '0' : '30rpx' }"
              >
                <view
                  style="
                    font-size: 26rpx;
                    font-weight: bold;
                    color: #000;
                    width: 100rpx;
                  "
                  >{{ val.desc_1 }}</view
                >
                <view style="margin-top: 10rpx; width: 100rpx; height: 30rpx">{{
                  val.desc_2
                }}</view>
              </view>
            </block>
          </view>
        </view>
      </view>

      <!--plus会员引导-->
      <view
        class="Specifications bg vip-flex"
        v-if="
          user_type == 2 &&
          goods.plus_mem_status == 1 &&
          plus_register_state == 1
        "
      >
        <view>
          <text class="plus-title">{{ "PLUS会员已为您优惠" }}</text>
          <text class="discount-money">￥{{ total_less_money }}</text>
          <text class="deadline"> {{ plus_end_time }}到期</text>
        </view>
        <view class="vip-btn" @tap="toPlusHome">立即续费</view>
      </view>
      <!--普通用户引导-->
      <view
        class="Specifications bg vip-flex"
        v-if="
          user_type == 1 &&
          goods.shop_mem_status == 1 &&
          vip_register_state == 1
        "
      >
        <view>
          <text class="plus-title">{{ "会员价" }}</text>
          <text class="discount-money">￥{{ goods.shop_mem_price }}</text>
          <text
            v-if="showIntegral && Number(goods.shop_mem_integral) > 0"
            class="discount-money"
          >
            +{{ goods.shop_mem_integral }}{{ integral_name }}</text
          >
        </view>
        <view class="vip-btn" @tap="toCard">注册会员</view>
      </view>
      <view
        class="Specifications bg vip-flex"
        v-if="
          user_type == 1 &&
          goods.plus_mem_status == 1 &&
          plus_register_state == 1
        "
      >
        <view>
          <text class="plus-title">{{ "PLUS会员价" }}</text>
          <text class="discount-money"> ￥{{ goods.plus_price }}</text>
          <text
            v-if="showIntegral && Number(goods.plus_mem_integral) > 0"
            class="discount-money"
          >
            +{{ goods.plus_mem_integral }}{{ integral_name }}</text
          >
        </view>
        <view class="vip-btn" @tap="toPlusHome">开通PLUS</view>
      </view>
      <!-- vip用户引导 -->
      <view
        class="Specifications bg vip-flex"
        v-if="
          user_type == 3 &&
          goods.plus_mem_status == 1 &&
          plus_register_state == 1
        "
      >
        <view>
          <text class="plus-title">{{ "PLUS会员价" }}</text>
          <text class="discount-money"> ￥{{ goods.plus_price }}</text>
          <text
            v-if="showIntegral && Number(goods.plus_mem_integral) > 0"
            class="discount-money"
          >
            +{{ goods.plus_mem_integral }}{{ integral_name }}</text
          >
        </view>
        <view class="vip-btn" @tap="toPlusHome">开通PLUS</view>
      </view>

      <!-- 配送方式 -->
      <view v-if="delivery_name" class="Specifications bg box-sizing fee-body">
        <text class="list-title fee-title">配送</text>
        <view>
          <text
            v-for="(item, index) in delivery_name"
            :key="index"
            class="SpecificationsText delivery-title"
            >{{ item }}</text
          >
        </view>
      </view>

      <!-- 评价 -->
      <view class="CommentStyle bg" @tap="toComment">
        <view class="Comment-nav">
          <text class="Comment-nav-words">商品评价 ({{ commentTotal }})</text>
          <view class="Specifications-img">
            <image mode="aspectFit" src="/static/images/arrow-1.png"></image>
          </view>
        </view>
        <view class="content">
          <view class="Comment-detail" v-if="commentTotal > 0">
            <view class="userInfo">
              <image
                :src="commentInfo[0].avatar"
                mode="aspectFit"
                class="userImage"
              ></image>
              <text class="nickName">{{ commentInfo[0].nickname }}</text>
            </view>
            <view class="Comment-con">
              <text class="Comment-con-words">{{
                commentInfo[0].content
              }}</text>
              <view class="Comment-con-img">
                <image
                  v-for="(item, i) in commentInfo[0].evaluate_img"
                  :key="i"
                  :src="item"
                  mode="aspectFit"
                  @tap.stop="scaleBig(i)"
                >
                </image>
              </view>
            </view>
          </view>
          <view class="content-title" v-else>
            <text class="Comment-content">该商品暂无评价~</text>
          </view>
        </view>
      </view>
      <view class="shopDetails" v-if="goods.details">
        <view class="shopTitle">商品详情</view>
        <view class="wxParse" >
          <jyf-parser :html="goods.details"></jyf-parser>
        </view>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="footer" :style="footerStyle">
      <button class="kefu" open-type="contact" @contact="handleContact">
        <image src="/static/images/kefu.png"></image>
        <text>客服</text>
      </button>

      <view class="sc sc2" @tap="toShoppingCar">
        <image src="/static/images/menu-icon-car-1.png"></image>
        <view class="badge-box" v-if="badgeText != 0">{{ badgeText }}</view>
        <text>购物车</text>
      </view>

      <view class="sc sc2" @click="dosc(goods.collect)">
        <image
          :src="
            goods.collect == 1
              ? '/static/images/sc2.png'
              : '/static/images/sc.png'
          "
        ></image>
        <text>{{ goods.collect == 1 ? "已收藏" : "收藏" }}</text>
      </view>

      <!-- <view class="details-btn">
				<view @tap="addToCar" class="btn_class buy">加入购物车</view>
			</view> -->

      <view class="details-btn">
        <view
          @tap="addToCar(goods)"
          class="btn_class buy"
          :class="{ toCarbuy: goods.goods_num <= 0 }"
        >
          {{ goods.goods_num <= 0 ? "已售罄" : "加入购物车" }}
        </view>
      </view>
    </view>

    <!-- <view class="choose-sku-container" v-show="alertToggle">
			<view class="choose-sku-model" @tap="alertToggle = false"></view>
			<view class="choose-sku-box" :style="skuBoxStyle">
				<text class="qh-rt-single qh-rt-a-zu4416 choose-sku-close-icon" @tap="alertToggle = false"></text>
				<view class="choose-sku-title-box">
					<view class="choose-sku-goods-image">
						<qh-goods-image :src="skuImg" size="200" preview></qh-goods-image>
					</view>
					<view class="choose-sku-goods-title-right-box">
						<view class="choose-sku-goods-stock">
							<block v-if="company">单位: {{company}}</block>
						</view>
						<view class="choose-sku-goods-stock">
							<block v-if="specifications">{{specifications}}</block>
						</view>
						<view class="choose-sku-goods-stock">库存 {{skuNum}}</view>
						<view class="choose-sku-price-box">
							<view class="choose-sku-price-title">单价</view>
							<view style='margin-top: -3px;'>
								<view v-if="showSkuOnlinePrice()">
									<text class="choose-sku-price">￥{{skuPrice}}</text>
								</view>
								<view class="choose-sku-price flex-cn" v-if="showSkuVipPrice()">
									<text class="price-color">￥{{skuShopMemPrice}}</text>
									<text v-if="showIntegral && Number(skuShopMemIntegral) > 0"
										class="discount-money">+{{skuShopMemIntegral}}{{integral_name}}</text>
									<text class="vip-price-icon">VIP</text>
								</view>
								<view class="choose-sku-price flex-cn" v-if="showSkuPlusPrice()">
									<text class="plus-price-color">￥{{skuPlusPrice}}</text>
									<text v-if="showIntegral && Number(skuPlusIntegral) > 0" class="discount-money">+{{skuPlusIntegral}}{{integral_name}}</text>
									<text class="plus-price-icon">PLUS</text>
								</view>
							</view>
						</view>
					</view>
					<view class="choose-sku-attr-box" v-if="goods.attribute_state == 2">
						<view class="sku-container">
						<view
							v-for="(weight, index) in skuList"
							:key="index"
							:class="['sku-button', selectedWeightIndex === index ? 'sku-selected' : '', skuNum < parseInt(weight.id) ? 'sku-disabled' : '']"
							@click="selectWeight(weight,index)">
							{{ weight.name }}
							</view>
						</view>
					</view>
					<view class="choose-sku-change-con" :style="goods.attribute_state==2?'border-top:1rpx solid #eee;':'border:none'">
						<view class="choose-sku-change-tag">数量</view>
						<view class="choose-sku-change border">
							<text class="qh-rt-single qh-rt-a-zu4424 choose-sku-change-icon" @click.stop="jian"></text>
							<view class="choose-sku-num">
								<input min="1" type="number" @blur="blurNum" :value="buyNum" placeholder="1" placeholder-class="choose-sku-p"></input>
							</view>
							<text class="qh-rt-single qh-rt-jia1 choose-sku-change-icon" @click.stop="jia"></text>
						</view>
					</view>
				</view>
			</view>
		</view> -->

    <view v-if="showInfo" class="backShadow" @click.self="closePopup">
      <view
        class="sku_goods-content"
        :class="{ animated: showInfo && !slideOut, 'slide-out': slideOut }"
      >
        <view class="info_app" @click.stop>


			<view class="sku_container" :style="skuBoxStyle">
            <view class="sku_modal" >
              <view class="sku_header">
                <text class="sku_title">请选择商品规格</text>
                <text class="sku_close-btn" @click="closePopup">×</text>
              </view>
              <view class="sku_product-info">
                <image  
                  class="sku_product-image"
                  :src="banners[0] ? banners[0] : goods.goods_img"
                ></image>
                <view class="sku_product-details">
                  <text class="sku_product-name"
                    >{{ goods.goods_name }}</text
                  >

                  <view class="sku_tags">
                    <text class="sku_tag" >{{goods.subheading }}</text>
                  </view>

                  <view class="choose-sku-price-box" v-if="goods.attribute_state == 2 ">
                    <view class="choose-sku-price-title">单价</view>
                    <view style='margin-top: -3px;'>
                      <view class="choose-sku-price flex-cn" v-if="showSkuPlusPrice()">
                        <text class="plus-price-color">￥{{skuPlusPrice}}</text>
                        <text v-if="showIntegral && Number(skuPlusIntegral) > 0" class="discount-money">+{{skuPlusIntegral}}{{integral_name}}</text>
                        <text class="plus-price-icon">PLUS</text>
                      </view>
                      <view class="choose-sku-price flex-cn" v-if="showSkuVipPrice()">
                        <text class="price-color">￥{{skuShopMemPrice}}</text>
                        <text v-if="showIntegral && Number(skuShopMemIntegral) > 0"
                          class="discount-money">+{{skuShopMemIntegral}}{{integral_name}}</text>
                        <text class="vip-price-icon">VIP</text>
                      </view>
                      <view v-if="showSkuOnlinePrice()">
                        <text class="choose-sku-price">￥{{skuPrice}}</text>
                      </view>
                      <view class="choose-sku-price flex-cn" v-if="goods.rebate > 0">
                          <text class="plus-price-color">￥</text>
                          <text class="plus-price-color" style="font-size: 22rpx;"> {{ goods.rebate }}</text>
                          <text class="plus-price-icon">返利</text>
                      </view>
                    </view>
                  </view>

                  <view class="choose-sku-price-box" v-if="goods.attribute_state == 1 ">
                    <view class="choose-sku-price-title">单价</view>
                    <view style="margin-top: -3px">
                      <view v-if="showOnlinePrice(goods)">
                        <text class="choose-sku-price sku_price">￥{{ goods.online_price }}</text>
                      </view>
                      <view class="choose-sku-price flex-cn" v-if="showVipPrice(goods)">
                        <text class="price-color">￥{{ goods.shop_mem_price }}</text>
                        <text class="vip-price-icon">VIP</text>
                      </view>
                      <view class="choose-sku-price flex-cn" v-if="showPlusPrice(goods)">
                        <text class="plus-price-color">￥{{ goods.plus_price }}</text>
                        <text class="plus-price-icon">PLUS</text>
                      </view>
                      <view class="choose-sku-price flex-cn" v-if="goods.rebate > 0">
                          <text class="plus-price-color">￥</text>
                          <text class="plus-price-color" style="font-size: 22rpx;"> {{ goods.rebate }}</text>
                          <text class="plus-price-icon">返利</text>
                      </view>
                    </view>
                  </view>

           
                </view>
              </view>
              <view class="sku_size-selection" >
                <view class="sku_size-options">
                  <view
                    v-for="(size,Sindex) in skuList"
                    :key="Sindex"
                    :class="[
                      'sku_size-option', 
                      {
                        sku_selected: sku_select_id=== size.id,
                        sku_disabled: size.disabled,
                      },
                    ]"
                    @click="selectSize(size)"
                  >
                    <text
                      v-if="size.disabled"
                      class="sku_size-text sku_disabled-text"
                      >{{ size.name }}</text
                    >
                    <text v-else>{{ size.name }}</text>
                    <text v-if="size.disabled" class="sku_out-of-stock"
                      >缺货</text
                    >
                  </view>
                </view>
              </view>

                <view class="sku_size-options" v-if="surplus && surplus <= 10">
                    <text style="font-size: 24rpx;color: red;">仅剩余{{surplus}}件</text>
                </view>

              <view class="sku_quantity-selection">
                <view
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  "
                >
                  <text class="sku_quantity-title">数量</text>
                  <view class="sku_quantity-control">
           
                    <text
                    class="qh-rt-single qh-rt-a-zu4424 choose-sku-change-icon"
                      @click.stop="jian"
                    ></text>
						        <input style="width: 100rpx;text-align: center;" min="1" type="number" @blur="blurNum" :value="buyNum" placeholder="1" placeholder-class="choose-sku-p"></input>

                    <text
                    class="qh-rt-single qh-rt-jia1 choose-sku-change-icon"
                    @click.stop="jia"
                    ></text>
                  </view>
                </view>
              </view>


            </view>
          </view>


        </view>
      </view>
    </view>

    <block>
      <share v-if="isShowShare" @close="closeShowShare" :share="share"></share>

      <view class="canvas-box">
        <!-- #ifdef MP-WEIXIN -->
        <canvas class="mycanvas" canvas-id="mycanvas"></canvas>
        <!-- #endif -->
        <!-- #ifdef MP-ALIPAY -->
        <canvas class="mycanvas" id="mycanvas"></canvas>
        <!-- #endif -->
      </view>
    </block>
  </qh-page-view>
</template>

<script>
const app = getApp().globalData;
import share from "@/components/share.vue";
export default {
  components: {
    share,
  },
  data() {
    return {
      single_size:false,
      single: false,
      surplus: null,
      sku_select_id: null,
      showInfo: false,
      slideOut: false,
      selecteditem: null,
      promotion_price: "",
      sku_promotion_status: "",
      skuNum: "",
      company: "单位",
      specifications: "规格",
      sc: "/static/images/sc.png",
      scText: "",
      collect: 0,
      not_banners: 0,
      goods_id: "",
      goods: {
        online_price: "",
        sell_num: "",
      },
      banners: [],
      delivery_name: [],
      commentInfo: [],

      autoplay: true,
      playVideo: true,

      user_type: 1,
      //用户权益
      share: {
        maskShare: false,
        //分享弹窗
        maskHidden: false, //海报图片,
        type: 5,
        data: "",
        goods_id: "",
      },
      vip: null,
      commentTotal: 0,

      isShowShare: false,
      isShowShareData: {
        goods: "",
        goods_img: "",
        goods_id: "0",
      },

      total_less_money: "", //共计优惠金额
      plus_end_time: "", //plus会员到期时间

      vip_register_state: "", // 为0 关闭 为1 开启  引导成为vip按钮
      plus_register_state: "", //为0 关闭  为1 开启  引导续费/成为plus按钮

      //规格
      alertToggle: false,
      selectSkuDetailId: null,
      buyNum: 1,
      skuSelectIndex: [],
      shopItemInfo: {},
      selectArr: [],
      skuImg: "",
      skuList: [],
      skuPrice: "",
      skuShopMemPrice: "",
      skuPlusPrice: "",
      skuShopMemIntegral: 0,
      skuPlusIntegral: 0,
      skuDetailList: [],

      isOnloaded: false,
      integral_name: "",
      selectedWeightIndex: null,
      sizeIndex: null,
    };
  },

  computed: {
    badgeText() {
      return this.$store.merShoppingGoodsList.length;
    },
    footerStyle() {
      let h = this.$store.bottomHeight + 110;
      return (
        "height:" + h + "rpx;padding-bottom:" + this.$store.bottomHeight + "rpx"
      );
    },
    skuBoxStyle() {
      //   return "margin-bottom:" + (this.$store.bottomHeight + 110) + "rpx";
      return "margin-bottom:" + (this.$store.bottomHeight + 110) + "rpx";
    },
    showIntegral() {
      return (
        this.$store.integral_arrive_cash == 1 &&
        this.$store.marketing_methods == 2
      );
    },
  },
  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    // this.scFun()
    await this.$onLaunched;
    /**
     * &share_uid => &su	分享人uid
     * */
    // #ifdef MP-ALIPAY
    if (JSON.stringify(options) == "{}") {
      options = my.getLaunchOptionsSync().query;
    }
    // #endif

    // #ifdef MP-WEIXIN
    if (!options.id) {
      options = getApp().globalData.getOnLaunchParam(options);
    }
    // #endif

    if (options && options.id) {
      this.goods_id = options.id;
    }
    this.share.goods_id = options.id;

    await this.getVipDisCount();

    await this.getDetail();

    if (this.$store.merShoppingGoodsList.length) {
      this.$mutations.getShopList();
    }

    this.plus_register_state = app.XcxData.plus_register_state;
    this.vip_register_state = app.XcxData.vip_register_state;
    this.isOnloaded = true;
  },
  onShow() {
    this.integral_name = this.$store.integral_name;
    if (this.isOnloaded) {
      this.getVipDisCount();
    }
  },
  // onShareAppMessage(res) {

  //   return {
  //     title: this.goods.goods_name,
  //     path:
  //       "/pages/mer/goods/details/details?id=" +
  //       this.goods_id +
  //       "&share_uid=" +
  //       this.$store.userInfo.uid,
  //     imageUrl: this.goods.goods_img,
  //   };
  // },
  methods: {
    //规格
    selectSize(size) {
      if (!this.skuList.find((s) => s.id === size.id).disabled) {
        this.sku_select_id = size.id;
        this.selectSkuDetailId = size.id;
        this.surplus = size.goods_num;
      }
    },

    handlerApply() {
      this.showInfo = true;
      this.slideOut = false;
    },
    closePopup() {
      this.slideOut = true;
      this.sku_select_id = null;
      this.surplus = null;
      this.sku_select_id = null;
      this.buyNum = 1;
      this.sizeIndex = null;

      setTimeout(() => {
        this.showInfo = false;
        this.slideOut = false;
      }, 500); // 500ms 是动画的持续时间
    },

    selectWeight(val, index) {
      this.selectedWeightIndex = index;
      this.selectSkuDetailId = val.id;
    },

    async dosc(isCollected) {
      let that = this;
      if (isCollected == 0) {
        try {
          const response = await this.$request(
            "/SmallProgramApi/Collect/addCollect",
            { goods_id: this.goods_id, store_id: this.$store.mallStoreId }
          );
          if (response.status == 1) {
            uni.showToast({
              title: response.msg,
              icon: "none",
            });
            that.goods.collect = 1; // 修改为 goods.collect
            that.scFun(that.goods.collect); // 修改为 goods.collect
          } else {
            uni.showToast({
              title: response.msg,
              icon: "none",
            });
          }
        } catch (error) {
          console.error(error);
        }
      } else {
        try {
          const response = await this.$request(
            "/SmallProgramApi/Collect/cancelCollect",
            { goods_id: this.goods_id, store_id: this.$store.mallStoreId }
          );
          if (response.status == 1) {
            uni.showToast({
              title: response.msg,
              icon: "none",
            });
            that.goods.collect = 0; // 修改为 goods.collect
            that.scFun(that.goods.collect); // 修改为 goods.collect
          } else {
            uni.showToast({
              title: response.msg,
              icon: "none",
            });
          }
        } catch (error) {
          console.error(error);
        }
      }
    },

    scFun(collect) {
      let sc1 = "/static/images/sc.png";
      let sc2 = "/static/images/sc2.png";

      if (collect == 1) {
        this.sc = sc2;
        this.scText = "已收藏";
      } else {
        this.sc = sc1;
        this.scText = "收藏";
      }
    },

    // 展示plus会员价条件
    showPlusPrice() {
      return app.showPlusPrice(this.goods);
    },
    // 展示会员价条件
    showVipPrice() {
      return app.showVipPrice(this.goods);
    },
    // 展示普通价格
    showOnlinePrice() {
      return app.showOnlinePrice(this.goods);
    },
    // 展示plus会员价条件
    showSkuPlusPrice() {
      return app.showPlusPrice({
        shop_mem_status: this.goods.shop_mem_status,
        plus_mem_status: this.goods.plus_mem_status,
        shop_mem_price: this.skuShopMemPrice,
        plus_price: this.skuPlusPrice,
        online_price: this.skuPrice,
      });
    },
    // 展示会员价条件
    showSkuVipPrice() {
      return app.showVipPrice({
        shop_mem_status: this.goods.shop_mem_status,
        plus_mem_status: this.goods.plus_mem_status,
        shop_mem_price: this.skuShopMemPrice,
        plus_price: this.skuPlusPrice,
        online_price: this.skuPrice,
      });
    },
    // 展示普通价格
    showSkuOnlinePrice() {
      return app.showOnlinePrice({
        shop_mem_status: this.goods.shop_mem_status,
        plus_mem_status: this.goods.plus_mem_status,
        shop_mem_price: this.skuShopMemPrice,
        plus_price: this.skuPlusPrice,
        online_price: this.skuPrice,
      });
    },
    //轮播视频加载完触发事件
    showBanner() {
      this.autoplay = true;
    },
    // 加
    jia() {
      console.log(this.goods.attribute_state, "this.goods.attribute_state");
      if (this.goods.attribute_state == 2) {
        if (!this.sku_select_id) {
          uni.showToast({
            title: "请选择规格",
            icon: "none",
          });
          return;
        }

        if (this.buyNum >= this.surplus) {
          uni.showToast({
            title: "库存不足",
            icon: "none",
          });
          return;
        } else {
          this.buyNum++;
        }
      } else {
        if (this.buyNum >= this.goods.goods_num) {
          uni.showToast({
            title: "库存不足",
            icon: "none",
          });
          return;
        } else {
          this.single = true;
          this.buyNum++;
        }
      }
    },
    // 减
    jian() {
      if (this.buyNum > 1) {
        this.buyNum--;
      }
    },
    blurNum(e) {
      let num = e.detail.value;
      if (num == "" || num < 0) {
        this.buyNum = 1;
      } else {
        this.buyNum = e.detail.value;

        if (this.buyNum > 0) {
          this.single = true;
        }

        console.log(e.detail.value, " e.detail.value;");
      }
    },
     //多规格购物车选中的状态
     checkToCart(){
      this.$store.checkedList.push({
        goods_id:  this.goods_id,
      });
      this.$store.checkedList = this.uniqueArray(
        this.$store.checkedList,
        "goods_id"
      );
    },

    //加入购物车
    async addToCar(goods) {
      let res = null;
      //多规格
      if (this.goods.attribute_state == 2) {
        if (!this.selectSkuDetailId && this.buyNum > 1) {
          uni.showToast({
            title: "请选择商品规格",
            icon: "none",
          });
          return;
        }

        this.sizeIndex = this.$store.merShoppingGoodsList.findIndex((item) => {
          return (
            item.goods_id === this.goods_id &&
            this.selectSkuDetailId === item.sku_id
          );
        });

        if (this.sizeIndex !== -1) {
          //更新购物车
          let Indexnum =
            this.$store.merShoppingGoodsList[this.sizeIndex].num + this.buyNum;
          this.handlerApply();
          if (!this.sku_select_id) return;
          let obj = {
            goods_id: this.goods_id,
            sku_id: this.selectSkuDetailId,
            num: Indexnum,
          };
          res = this.$mutations.setShoppingCar(obj);
        } else {
          this.handlerApply();
          if (!this.sku_select_id) return;
          res = await this.$mutations.setShoppingCar({
            goods_id: this.goods_id,
            sku_id: this.selectSkuDetailId,
            num: this.buyNum,
          });
        }
        if (res) {
          uni.showToast({
            title: "加入购物车成功",
            icon: "none",
          });
            this.closePopup();  
            this.checkToCart();
        }
      }
      //单规格
      if (this.goods.attribute_state == 1) {
        if (!this.showInfo) return this.showInfo = true;

        this.sizeIndex = this.$store.merShoppingGoodsList.findIndex((item) => {
          return (
            item.goods_id === this.goods_id 
          );
        });

        if (this.sizeIndex !== -1) {
          //更新购物车
          let obj = {
            goods_id: this.goods_id,
            num:this.$store.merShoppingGoodsList[this.sizeIndex].num + this.buyNum,
          };
          console.log(obj   , '什么对象啊')
          this.$mutations.setShoppingCar(obj).then((response)=>{
            if(response){
              uni.showToast({
              title: "加入购物车成功",
              icon: "none",
            });
              this.closePopup(); 
              this.checkToCart();
            }
          });

        }else{
            res = await this.$mutations.setShoppingCar({
            goods_id: this.goods_id,
            num: this.buyNum,
          });

          if (res) {
            uni.showToast({
              title: "加入购物车成功",
              icon: "none",
            });
            this.closePopup(); 
            this.checkToCart();
          }
        }
     
      }
    },
    // 自定义去重函数，针对对象类型的元素
    uniqueArray(arr, prop) {
      return arr.filter(
        (obj, index, self) =>
          index === self.findIndex((t) => t[prop] === obj[prop])
      );
    },
    toPlusHome() {
      uni.navigateTo({
        url: "/pages/mine/plusHome/plusHome",
      });
    },
    toCard() {
      uni.navigateTo({
        url: "/pages/mine/card/card",
      });
    },
    // 跳转到评价列表页
    toComment() {
      uni.navigateTo({
        url:
          "/pages/order/commentList/comment" +
          "?type=1&goods_id=" +
          this.goods_id,
      });
    },
    toShoppingCar() {
      uni.navigateTo({
        url: "/pages/mer/goods/shoppingCar/shoppingCar",
      });
    },
    closeShowShare() {
      this.share.maskShare = false;
      this.isShowShare = false;
    },
    //点击分享
    showShare() {
      this.share.maskShare = true;
      this.share.maskHidden = false;
      this.share.data = this.isShowShareData;
      this.isShowShare = true;
    },

    //查看大图
    seeBig(index) {
      uni.previewImage({
        current: this.banners[index],
        urls: this.banners, // 需要预览的图片http链接列表
      });
    },
    cratedSku() {
      let skuDetailList = this.skuDetailList;
      let shopItemInfo = {};

      for (let i in skuDetailList) {
        shopItemInfo[skuDetailList[i].sku_id_list] = skuDetailList[i];
      }

      this.shopItemInfo = shopItemInfo;
      this.checkItem();
    },
    checkSku(e) {
      let pIndex = e.currentTarget.dataset.pIndex;
      let cIndex = e.currentTarget.dataset.cIndex;
      let skuList = this.skuList;
      let skuSelectIndex = this.skuSelectIndex;
      let selectArr = this.selectArr;

      if (selectArr[pIndex] != skuList[pIndex].list[cIndex].id) {
        selectArr[pIndex] = skuList[pIndex].list[cIndex].id;
        skuSelectIndex[pIndex] = cIndex;
      } else {
        selectArr[pIndex] = 0;
        skuSelectIndex[pIndex] = -1;
      }

      this.setData({
        selectArr: selectArr,
        skuSelectIndex: skuSelectIndex,
      });
      this.$forceUpdate();
      this.checkItem();
    },
    checkItem() {
      let option = this.skuList;
      let selectArr = this.selectArr;
      let result = []; //定义数组存储被选中的值

      for (let i in option) {
        result[i] = selectArr[i] ? selectArr[i] : 0;
      }

      for (let i in option) {
        let last = result[i];

        for (let k in option[i].list) {
          result[i] = option[i].list[k].id;
          option[i].list[k].status = this.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
        }

        result[i] = last;
      }

      this.skuList = option;

      if (selectArr.indexOf(0) == -1) {
        let id_list = selectArr.join(",");

        let sku = this.shopItemInfo[id_list];
        this.selectSkuDetailId = sku.sku_id;
        this.skuPrice = sku.online_price;
        this.skuShopMemPrice = sku.shop_mem_price;
        this.skuShopMemIntegral = sku.shop_mem_integral;
        this.skuPlusIntegral = sku.plus_mem_integral;
        this.skuImg = sku.path ? sku.path : this.goods.path;
        this.skuPlusPrice = sku.plus_price;
      } else {
        // this.selectSkuDetailId = -1;
        this.selectSkuDetailId = null;
        this.skuPrice = this.goods.online_price;
        this.skuShopMemPrice = this.goods.shop_mem_price;
        this.skuImg = this.goods.goods_img;
        this.skuPlusPrice = this.goods.plus_price;
        this.skuShopMemIntegral = this.goods.shop_mem_integral;
        this.skuPlusIntegral = this.goods.plus_mem_integral;
      }
    },
    isMay(result) {
      for (let i in result) {
        if (result[i] == 0) {
          return 1;
        }
      }

      let sku = this.shopItemInfo[result];

      if (sku && sku.sku_id >= 0) {
        return 1;
      } else {
        return 0;
      }
    },
    //获取会员折扣
    async getVipDisCount() {
      if (this.$store.userInfo.type == 1) return (this.vipDiscount = 1);
      const { status, data } = await this.$request(
        "SmallProgramApi/Vip/getVipDetails",
        {
          plus_coupon_show: 1,
        }
      );
      if (status == 1) {
        this.vip = data;
        this.vipDiscount = data.discount;
        this.user_type = data.user_type;
        this.plus_end_time = data.plus_end_time;
        this.total_less_money = data.total_less_money;
      }
    },
    //过滤配送
    getDeliveryType(delivery_type) {
      let typeMap = {
        1: "自提",
        2: "同城配送",
        3: "快递配送",
      };
      let result = delivery_type
        .split(",")
        .map((type) => typeMap[type])
        .filter(Boolean);
      return result.length > 0 ? result : [];
    },
    //获取商品详情
    async getDetail() {
      if (!this.goods_id) return;
      const {
        status,
        data,
        skuList,
        skuDetailList,
        message,
        // } = await this.$request('SmallProgramApi/MerchantGoods/getGoodsInfo', {
      } = await this.$request("SmallProgramApi/Goods/getGoodsDetails", {
        // SmallProgramApi/Goods/getGoodsDetails
        id: this.goods_id,
        store_id: this.$store.mallStoreId,
      });

      if (status != 1)
        return uni.showModal({
          title: "提示",
          content: res.msg,
          complete: (res) => {
            uni.navigateBack({
              delta: 1,
            });
          },
        });
      (this.specifications = data.specifications ? data.specifications : ""),
        (this.company = data.company ? data.company : ""),
        (this.skuNum = parseFloat(data.goods_num));

      this.goods = data;

      //这里给他添加一个disabled
      if(skuDetailList){
        skuDetailList.forEach((item) => {
          const goodsNum = parseInt(item.goods_num);
          item.disabled = goodsNum <= 0;
        });
        this.skuList = skuDetailList;
      }
     
      data.id = data.goods_id;
      data.goods_img = data.goods_img;
      this.isShowShareData = {
        goods: data,
        goods_img: data.goods_img ? data.goods_img : "",
        goods_id: this.goods_id,
        text: data.goods_name ? data.goods_name : "",
      };

      this.skuPrice = this.goods.online_price;
      this.skuShopMemPrice = this.goods.shop_mem_price;
      this.skuImg = this.goods.goods_img;
      this.skuPlusPrice = this.goods.plus_price;
      this.skuShopMemIntegral = this.goods.shop_mem_integral;
      this.skuPlusIntegral = this.goods.plus_mem_integral;

      this.getcommentList();

      this.delivery_name = this.getDeliveryType(data.delivery_type);


      
      if (data.banners.length) {
        this.banners = data.banners;

        if (this.goods.video_url) {
          this.autoplay = false;
          this.playVideo = true;
        } else {
          this.autoplay = true;
          this.playVideo = false;
        }
      } else if (data.goods_img) {
        this.banners = [data.goods_img];
      } else {
        this.not_banners = 1;
      }

      if (data.sku_detail_list && data.sku_attr_list) {
        let skuSelectIndex = [];
        let selectArr = [];

        for (let i = 0; i < data.sku_attr_list.length; i++) {
          skuSelectIndex.push(-1);
          selectArr.push(0);
        }

        this.setData({
          skuList: skuList,
          skuDetailList: data.sku_detail_list,
          skuSelectIndex: skuSelectIndex,
          selectArr: selectArr,
          skuImg: data.goods_img,
        });
        this.cratedSku();
      }
    },
    //查看评价大图
    scaleBig(index) {
      uni.previewImage({
        current: this.commentInfo[0].evaluate_img[index],
        urls: this.commentInfo[0].evaluate_img, // 需要预览的图片http链接列表
      });
    },
    //获取商品评价
    async getcommentList() {
      const { status, data } = await this.$request(
        "SmallProgramApi/OrderEvaluate/getMerchantGoodsEvaluate",
        {
          goods_id: this.goods_id,
          page: 1,
          limit: 1,
        }
      );
      if (status == 1) {
        this.commentInfo = data.list;
        this.commentTotal = data.count;
      }
    },
  },
};
</script>
<style>
@import "./details.css";
@import "./sku_details.scss";

.tags-container {
  display: flex;
  align-items: center;
  /* width: 97%; */
  overflow: hidden;
  position: relative;
  /* justify-content: center; */
}

.tag_label {
  padding: 0rpx 40rpx;
  padding-right: 55rpx;
  position: relative;
  color: #9e9e9e;
  font-size: 11px;
  white-space: nowrap;
  text-align: center;
}

.tag_label:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 50%;
  border-right: 1px solid #f2f3f5;
}

.myvideo {
  width: 100%;
  height: 100%;
}

.buy {
  border-radius: 50rpx;
}

.sku-container {
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
  gap: 15rpx;
  align-items: center;
  padding: 10rpx;
}

.sku-button {
  flex: 1 0 auto;
  /* max-width: 60px;  */
  /* height: 30px; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background-color: #f5f5f5;
  color: #000;
  font-size: 14px;
  cursor: pointer;
}

.sku-button.sku-selected {
  border: 1rpx solid #ffa500;
  background-color: #fff3e0;
  color: #ffa500;
}

.sku-button.sku-disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
  cursor: not-allowed;
}
</style>
